<template>
  <div class="setter-float">
    <svg-icon v-if="windowWidth >= 1000" @click="handleLayout([layout[0], 1])" type="editor-expand" />
    <span class="setter-float-title" :style="computedSetterFloatTitleStyle">{{title + '配置'}}</span>
  </div>
</template>

<script>
import set from '@/mixins/setter';
import window from '@/mixins/window';

export default {
  name: 'SetterFloat',
  mixins: [
    window,
    set
  ],
  computed: {
    computedSetterFloatTitleStyle() {
      const style = {};

      if(this.windowWidth < 1000) {
        style.marginLeft = '0'
      } else {
        style.marginLeft = '8px'
      }

      return style;
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/styles/vars.less';
.setter-float {
    padding: 8px 16px;
    background: lighten(@dark-color, 15.29% - lightness(@dark-color)); 
    border-radius: 4px 0px 0px 4px;
    border: 1px solid lighten(@dark-color, 43.14% - lightness(@dark-color));
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>